<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="cn" lang="cn">
<head>
<style type="text/css">
.widget-dialog {
	font-size: 12px;
	position: fixed;
	top: 0px;
	left: 0px;
	width: 100%;
	height: 100%;
	background-color: rgba(0, 0, 0, 0.3);
}

.widget-dialog-container {
	position: absolute;
	left: 50%;
	top: 50%;
	border: 2px solid #e0e1e5;
	border-radius: 2px;
	box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.3);
	min-width: 250px;
	min-height: 230px;
	width: 400px;
	padding: 20px;
	z-index: 1000;
	background: #FFF;
	-webkit-transform: translate(-50%, -50%);
}

.widget-dialog-head {
	position: relative;
	height: 50px;
	line-height: 50px;
	text-align: center;
}

.widget-dialog-title {
	text-align: center;
}

.widget-dialog-body {
	
}

.catagory-chose-container {
	border: 1px solid #e0e1e5;
}

.move-to {
	margin: 10px;
}

.catagory-chose-container {
	margin-top: 10px;
}

.catagory-chose-tree {
	height: 200px;
	border-width: 1px 0px 0px 0px;
	border-color: #e0e1e5;
	border-style: solid;
	padding: 10px;
}

.name {
	display: flex;
	position: relative;
	display: -webkit-flex;
}

.tree-title {
	display: flex;
	display: -webkit-flex;
	padding-left: 20px;
	-webkit-align-items: center;
	align-items: center;
}

ul {
	list-style: none;
	margin: 0px;
	padding: 0px;
	display: block;
}

.tree-container {
	display: block;
}

.file-tree {
	
}

.file-tree .tree-title i.folder-icon {
	width: 24px;
	height: 24px;
}

.file-tree .tree-title.expandable	.folder-icon {
	background: url(static/centerPane/sprite-4ce3c9eaa2.svg) no-repeat;
	background-position: 88.6685552407932% 64.86486486486487%;
}

.file-tree .tree-title i.arrow {
	display: block;
	width: 14px;
	height: 14px;
}

.file-tree .tree-title.expandable .arrow {
	background: url(static/centerPane/sprite-4ce3c9eaa2.svg) no-repeat;
	background-position: 56.74931129476584% 98.83381924198251%;
}

.toggle {
	width: 14px;
	height: 14px;
}

.file-tree .tree-title.expandable.expanded .arrow {
	background: url(static/centerPane/sprite-4ce3c9eaa2.svg) no-repeat;
	background-position: 68.31955922865014% 98.83381924198251%;
}

.file-tree .tree-title.expandable.expanded i.folder-icon {
	background: url(static/centerPane/sprite-4ce3c9eaa2.svg) no-repeat;
	background-position: 56.657223796033996% 47.747747747747745%;
}

.widget-dialog-footer {
	text-align: center;
	padding: 10px 0px;
	vertical-align: middle;
}

.widget-dialog .widget-dialog-footer .btn {
	height: 34px;
	min-width: 82px;
	border-radius: 3px;
	margin-left: 20px;
}

.btn {
	font-size: 12px;
	display: inline-block;
	vertical-align: middle;
	text-align: center;
	color: #ffffff;
	background: #398dee;
	border-radius: 2px;
	border: 1px solid #398dee;
	cursor: pointer;
	outline: none;
}

.btn-cancel {
	background: #fff;
	color: #82b6f4;
}

.svg_dialog_close {
	background: url(static/centerPane/sprite-4ce3c9eaa2.svg) no-repeat;
	background-position: 100% 39.16913946587537%;
	width: 20px;
	height: 20px;
	position: absolute;
	right: 0px;
	top: 15px;
	cursor: pointer;
}

.svg_dialog_close:hover {
	background: url(static/centerPane/sprite-4ce3c9eaa2.svg) no-repeat;
	background-position: 94.39775910364146% 12.462908011869436%;
	width: 20px;
	height: 20px;
	position: absolute;
	right: 0px;
	top: 15px;
	cursor: pointer;
}

/*
reset password
*/
.widget-dialog .widget-dialog-body .sp-bd {
	padding-top: 10px;
}

.widget-dialog .widget-dialog-body .sp-hd {
	height: 30px;
	line-height: 30px;
	margin-bottom: 10px;
	color: #3e3e3e;
}

.sp-hd span {
	color: bac0c6;
}

.widget-dialog .widget-dialog-body .sp-bd input {
	width: 100%;
	box-sizing: border-box;
	margin-bottom: 15px;
	line-height: 28px;
	border-radius: 3px;
	box-shadow: none;
	border: 1px solid rgb(224, 225, 229);
	padding: 5px 10px;
}
</style>
</head>

<body>
	<!--
	<div class="widget-dialog">
		<div class="widget-dialog-container">
			<div class="widget-dialog-head">
				<span class="widget-dialog-title">移动到</span>
				<span class="svg_dialog_close"></span>
			</div>

			<div class="widget-dialog-body">
				<div><i class="file-icon"></i>新建文件夹</div>
				<div class="catagory-chose-container">
					<div class="move-to">移动到</div>
					<div class="catagory-chose-tree">
						<div class="file-tree">
							<div class="tree-title expandable expanded">
								<div class="toggle"><i class="arrow"></i></div>
								<div class="name">
									<i class="folder-icon"></i>
									<span style="line-height:24px;">asdf</spna>
								</div>

							</div>
							<ul class="tree-container">
								<li>
									<div class="file-tree">
										<div class="tree-title expandable">
											<div class="toggle"><i class="arrow"></i></div>
											<div class="name">
												<i class="folder-icon"></i>
												<span>asdf</spna>
											</div>

										</div>
										<ul class="tree-container">
											<li>
											</li>
											<li>
											</li>
										</ul>
									</div>
								</li>
								<li>
								</li>
							</ul>
						</div>
					</div>
				</div>
				</div>
				<div class="widget-dialog-footer">
					<button class="btn">确定</button>
					<button class="btn btn-cancel">取消</button>
				</div>
			</div>
		</div>
	</div>
-->

	<div class="widget-dialog">
		<div class="widget-dialog-container">
			<div class="widget-dialog-head">
				<span class="widget-dialog-title">移动到</span> <span
					class="svg_dialog_close"></span>
			</div>

			<div class="widget-dialog-body">
				<div class="sp-hd">
					设置阅读密码<span>(密码长度4-50)</span>
				</div>
				<div class="sp-bd">
					<input placeholder="请输入密码" type="password"
						class="ng-pristine ng-valid ng-touched" /> 
					<input
						placeholder="再次输入密码" type="password"
						class="ng-untouched ng-pristine ng-valid" />

				</div>
			</div>
			<div class="widget-dialog-footer">
				<button class="btn">确定</button>
				<button class="btn btn-cancel">取消</button>
			</div>
		</div>
	</div>
</body>

</html>
